<template>
	<div class="div-flex-center">
		<div class="left-flex">
			<div class="left-stu-info">
				<img :src="state.userInfoData.avatar?state.userInfoData.avatar:'../assets/big_logo.png'" alt="" />
				<p>
					<span>{{ state.userInfoData.nickName }}</span>
					ID:{{state.userInfoData.id }}
				</p>
			</div>
			<hr />
			<div class="study-center-title">
				<div>
					<img src="../assets/20230821113603_231.png " alt="" />
					<span>学习中心</span>
				</div>
				<img class="qt_img" src="../assets/20230821115034_290.png" alt="" />
			</div>
			<ul class="study-center-ul">
				<li v-for="(item, index) in state.center_list1"
					:class="{ 'study-li-active': item.id == state.center_index }" @click="state.center_index = item.id">
					{{ item.name }}
				</li>
			</ul>
		</div>
		<div class="right-flex" v-if="state.center_index ==2">
			<word-book></word-book>
		</div>
		<div class="right-flex" v-if="state.center_index ==3">
			<wrong-question-book></wrong-question-book>
		</div>
		<div class="right-flex" v-show="state.center_index ==1">
			<div class="title-label">学习分析</div>
			<div class="right-flex-content right-flex-content">
				<div>
					<div class="tab-pane">
						<div v-for="(item, index) in state.fxnav"
							:class="{ 'underline-div': state.fxnavIndex == index }" @click="state.fxnavIndex = index">
							{{ item }}
							<div></div>
						</div>
					</div>
					<div v-if="state.fxnavIndex == 0">
						<p class="title-p">
							<img src="../assets/left.png" class="title-p-one" />
							<span>Candidate Details</span>
							<img v-if="state.updateUserFlag" @click="updateUser" class="title-p-two"
								src="../assets/20230821164051_267.png" />
							<img v-else @click="state.updateUserFlag = true" class="title-p-two"
								src="../assets/20230821111623_123.png" />
						</p>
						<form id="studentForm" action="">
							<table class="stu-info-tab">
								<tbody>
									<tr>
										<th>Name</th>
										<td>
											<input type="text" name="ename" :readonly="!state.updateUserFlag"
												:class="state.updateUserFlag?'input_box':''" autocomplete="new-password"
												v-model="state.userInfoData.nickName" />
										</td>
										<th>Mobile Number</th>
										<td>
											<input type="text" name="phone" :readonly="!state.updateUserFlag"
												:class="state.updateUserFlag?'input_box':''" autocomplete="new-password"
												v-model="state.userInfoData.phoneNumber" />
										</td>
										<td rowspan="3" class="avatar">
											<div class="avatar_block">
												<div class="fileinput-new thumbnail">
													<img v-if="!state.updateUserFlag" id="picImg"
														:src="state.userInfoData.avatar?state.userInfoData.avatar:'../assets/big_logo.png'" />
													<el-upload v-else class="avatar-uploader"
														action="http://ielts.tuyaedu.com/boot/sys/common/upload"
														:show-file-list="false" :on-success="handleAvatarSuccess"
														:before-upload="beforeAvatarUpload">
														<img v-if="state.userInfoData.avatar"
															:src="state.userInfoData.avatar" class="avatar" />
														<el-icon v-else class="avatar-uploader-icon">
															<Plus />
														</el-icon>
													</el-upload>
												</div>
											</div>
										</td>
									</tr>
									<tr>
										<th>Candidate ID</th>
										<td style="padding-left: 10px">{{ state.userInfoData.id }}</td>
										<th>Exam time</th>
										<td>
											<input type="text" v-if="!state.updateUserFlag" readonly="readonly"
												autocomplete="new-password" v-model="state.userInfoData.examDate" />
											<el-date-picker v-else
												v-model="state.userInfoData.examDate"></el-date-picker>
										</td>
									</tr>
									<tr>
										<th>Target score</th>
										<td><span style="padding: 10px">
												<input type="text" name="strivingGoal" :readonly="!state.updateUserFlag"
													v-model="state.userInfoData.targetScore"
													:class="state.updateUserFlag?'input_box':''"
													autocomplete="new-password" style="width: 75%" />
											</span></td>
										<th>Weak subjects</th>
										<td>
											<div style="font-size: 14px; padding-left: 10px">
												<input type="text" v-if="!state.updateUserFlag" readonly="readonly"
													autocomplete="new-password"
													v-model="state.userInfoData.weakSubjects" />
												<el-select v-else v-model="state.userInfoData.weakSubjectsList" multiple
													placeholder="请选择" style="width: 240px">
													<el-option key="1" label="Speaking" value="Speaking" />
													<el-option key="1" label="Reading" value="Reading" />
													<el-option key="1" label="Listening" value="Listening" />
													<el-option key="1" label="Writing" value="Writing" />
												</el-select>
											</div>
										</td>
									</tr>
									<tr>
										<th>Target college</th>
										<td colspan="4">
											<input type="text" name="strivingGoal" :readonly="!state.updateUserFlag"
												v-model="state.userInfoData.targetCollege"
												:class="state.updateUserFlag?'input_box':''" autocomplete="new-password"
												style="width: 75%" />
										</td>
									</tr>
								</tbody>
							</table>
						</form>
						<hr style="width: 97%; margin: -7px 6px" />
						<div class="tips-div">
							<p class="title-p" style="margin-top: 0">
								<img src="../assets/left.png" />
								<span>Tips</span>
							</p>
							<div v-html="state.tips"></div>
						</div>
					</div>
					<div v-show="state.fxnavIndex == 1">
						<p class="title-p">
							<img src="../assets/left.png" class="title-p-one" />
							<span>题型分析</span>
							<select class="form-control stu-info-select2" @change="selectChange($event,'listening')">
								<option value="0">全部练习分析</option>
								<option value="7">近7天</option>
								<option value="30">近30天</option>
							</select>
						</p>
						<div class="fxnavIndex_one_block">
							<div>
								<table class="statistical-table">
									<thead>
										<tr>
											<th>题型</th>
											<th>做题数</th>
											<th>正确数</th>
											<th>正确率</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="item in state.listeningList">
											<td>{{item.examTypeName}}</td>
											<td>{{item.totalNum}}</td>
											<td>{{item.rightNum}}</td>
											<td style="color: red">{{Math.round(item.rightRate * 100, 2)}}%</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div id="listeningEcharts" style="width: 622px; height: 400px"></div>
						</div>
					</div>

					<div v-show="state.fxnavIndex == 2">
						<p class="title-p">
							<img src="../assets/left.png" class="title-p-one" />
							<span>题型分析</span>
							<select class="form-control stu-info-select2" @change="selectChange($event,'reading')">
								<option value="0">全部练习分析</option>
								<option value="7">近7天</option>
								<option value="30">近30天</option>
							</select>
						</p>
						<div>
							<div class="fxnavIndex_one_block">
								<div>
									<table class="statistical-table">
										<thead>
											<tr>
												<th>题型</th>
												<th>做题数</th>
												<th>正确数</th>
												<th>正确率</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="item in state.readingList">
												<td>{{item.examTypeName}}</td>
												<td>{{item.totalNum}}</td>
												<td>{{item.rightNum}}</td>
												<td style="color: red">{{Math.round(item.rightRate * 100, 2)}}%</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div id="readingEcharts" style="width: 622px; height: 400px"></div>
							</div>
						</div>
					</div>

					<div v-show="state.fxnavIndex == 3">
						<div style="padding: 10px;">
							<el-table :data="state.speakingList" style="width: 100%">
								<el-table-column type="index" label="序号" width="60" />
								<el-table-column prop="paperTime" label="日期" width="200" />
								<el-table-column prop="fluencyScore" label="流利度分数" align="center" />
								<el-table-column prop="vocabularyScore" label="词汇分数" align="center" />
								<el-table-column prop="pronunciationScore" label="发音分数" align="center" />
								<el-table-column prop="grammarScore" label="语法分数" align="center" />
								<el-table-column prop="score" label="总得分" align="center" />
								<el-table-column prop="status" label="批改状态" align="center">
									<template #default="{ row, column, $index }">
										<div style="display: flex; align-items: center">
											{{row.status == 1 ? '待批改' : '已批改'}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" width="180" />
							</el-table>
							<div class="el-pagination"
								style="padding: 10px; text-align: center; display: flex; justify-content: center">
								<el-pagination :current-page="speakingPagination.pageNo"
									:page-size="speakingPagination.pageSize" :total="speakingPagination.total"
									@current-change="speakingPage"></el-pagination>
							</div>
						</div>
					</div>
					<div v-show="state.fxnavIndex == 4">
						<div style="padding: 10px;">
							<el-table :data="state.writingList" style="width: 100%">
								<el-table-column type="index" label="序号" width="60" />
								<el-table-column prop="paperTime" label="日期" width="200" />
								<el-table-column prop="score" label="总得分" align="center" />
								<el-table-column prop="status" label="批改状态" align="center">
									<template #default="{ row, column, $index }">
										<div style="display: flex; align-items: center">
											{{row.status == 1 ? '待批改' : '已批改'}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="remark" label="备注" />
							</el-table>
							<div class="el-pagination"
								style="padding: 10px; text-align: center; display: flex; justify-content: center">
								<el-pagination :current-page="writingPagination.pageNo"
									:page-size="writingPagination.pageSize" :total="writingPagination.total"
									@current-change="writingPage"></el-pagination>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import * as echarts from "echarts";
	import WordBook from "./WordBook.vue";
	import WrongQuestionBook from "./WrongQuestionBook.vue";
	import {
		ElMessage
	} from "element-plus";
	import {
		Plus
	} from '@element-plus/icons-vue'

	const {
		proxy
	} = getCurrentInstance()
	const router = useRouter()
	const route = useRoute()

	const writingPagination = reactive({
		pageSize: 10,
		pageNo: 1,
		total: 0
	})

	const speakingPagination = reactive({
		pageSize: 10,
		pageNo: 1,
		total: 0
	})

	const state = reactive({
		center_index: 1,
		center_list1: [{
				name: '学习分析',
				id: 1
			},
			{
				name: '单词本',
				id: 2
			},
			{
				name: '错题本',
				id: 3
			},
		],
		center_list2: [{
				name: '课程预约',
				id: 4
			},
			{
				name: '课程表',
				id: 5
			},
		],
		fxnav: ['Overall', 'Listening', 'Reading', 'Speaking', 'Writing'],
		fxnavIndex: 0,
		userInfoData: {},
		listeningList: [],
		readingList: [],
		writingList: [],
		speakingList: [],
		dateDay: 0,
		updateUserFlag: false,
		tips: ''
	})
	onMounted(() => {
		if (localStorage.getItem('token')) {
			let userInfo = localStorage.getItem('userInfo')
			if (userInfo) {
				state.userInfoData = JSON.parse(userInfo)
				state.userInfoData.weakSubjectsList = state.userInfoData.weakSubjects ? state.userInfoData
					.weakSubjects.split(",") : []
			}
		}
		let posterData = JSON.parse(localStorage.getItem('posterData'))
		if (posterData) {
			posterData.forEach(function(item, index) {
				if (item.showPosition == 9) {
					state.tips = item.content
				}
			})
		}
	})

	function getImagerUrl(url) {
		return 'http://ielts.tuyaedu.com/boot/sys/common/static/' + url;
	}

	function handleAvatarSuccess(response, uploadFile) {
		state.userInfoData.avatar = getImagerUrl(response.message)
	}

	function beforeAvatarUpload(rawFile) {
		if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
			ElMessage.error('Avatar picture must be jpg or png format!')
			return false
		} else if (rawFile.size / 1024 / 1024 > 2) {
			ElMessage.error('Avatar picture size can not exceed 2MB!')
			return false
		}
		return true
	}

	function updateUser() {
		if (!state.userInfoData.nickName) {
			ElMessage({
				message: '请输入名称!',
				type: 'error'
			})
			return;
		}
		if (!state.userInfoData.phoneNumber) {
			ElMessage({
				message: '请输入电话!',
				type: 'error'
			})
			return;
		}

		state.userInfoData.weakSubjects = state.userInfoData.weakSubjectsList.join(",")
		proxy.$http.post('/boot/user/customer/edit', state.userInfoData).then(res => {
			if (res.data.success) {
				ElMessage({
					message: '保存成功!',
					type: 'success',
				})
				state.updateUserFlag = false;
				localStorage.setItem("userInfo", JSON.stringify(state.userInfoData))
			}
		})
	}

	function selectChange(e, type) {
		state.dateDay = event.target.value
		if (type == 'reading') {
			getReadingList()
		} else {
			getListeningList();
		}
	}

	function getListeningList() {
		proxy.$http.get('/boot/user/customer/totalExam?paperType=1&dateDay=' + state.dateDay).then(res => {
			if (res.data.success) {
				getReadingList()
				getSpeakingList()
				getWritingList()
				state.listeningList = res.data.result
				initData(state.listeningList, 'listeningEcharts')
			}
		})
	}

	function getReadingList() {
		proxy.$http.get('/boot/user/customer/totalExam?paperType=2&dateDay=' + state.dateDay).then(res => {
			if (res.data.success) {
				state.readingList = res.data.result
				initData(state.readingList, 'readingEcharts')
			}
		})
	}

	function speakingPage(e) {
		speakingPagination.pageNo = e
		getSpeakingList();
	}

	function getSpeakingList() {
		proxy.$http.get('/boot/user/customer/list?paperType=3&dateDay=' + state.dateDay + '&pageNo=' + speakingPagination
			.pageNo + '&pageSize=' + speakingPagination.pageSize).then(res => {
			if (res.data.success) {
				state.speakingList = res.data.result.records
				speakingPagination.total = res.data.result.total
			}
		})
	}

	function writingPage(e) {
		writingPagination.pageNo = e
		getWritingList();
	}

	function getWritingList() {
		proxy.$http.get('/boot/user/customer/list?paperType=4&dateDay=' + state.dateDay + '&pageNo=' + writingPagination
			.pageNo + '&pageSize=' + writingPagination.pageSize).then(res => {
			if (res.data.success) {
				state.writingList = res.data.result.records
				writingPagination.total = res.data.result.total
			}
		})
	}

	function initData(datas, chartId) {
		// 基于准备好的dom，初始化echarts实例
		let myChart = echarts.init(document.getElementById(chartId));
		// 指定图表的配置项和数据
		let titles = []
		let values1 = []
		let values2 = []
		datas.forEach((item) => {
			titles.push(item.examTypeName);
			values1.push(item.totalNum);
			values2.push(item.totalNum);
		})
		let option = {
			// backgroundColor: '#323a5e',
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					// 坐标轴指示器，坐标轴触发有效
					type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
				},
			},
			grid: {
				left: '5%',
				right: '2%',
				bottom: '16%',
				top: '8%',
				containLabel: true,
			},
			legend: {
				data: ['1', '2', '3'],
				right: 10,
				top: 12,
				textStyle: {
					color: '#fff',
				},
				itemWidth: 12,
				itemHeight: 10,
				// itemGap: 35
			},
			xAxis: {
				type: 'category',
				data: titles,
				axisLine: {
					// lineStyle: {
					//     color: '#52FFFF',
					// },
				},
				axisLabel: {
					// interval: 0,
					// rotate: 20,
					// textStyle: {
					//     fontSize: 16,
					//     fontFamily: 'Microsoft YaHei',
					// },
				},
			},

			yAxis: {
				type: 'value',
				// axisLine: {
				//     show: true,
				//     lineStyle: {
				//         color: '#52FFFF',
				//     },
				// },
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,0.3)',
					},
				},
				axisLabel: {},
			},
			series: [{
					name: '做题数',
					type: 'bar',
					barWidth: '18%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#8bd46e',
								},
								{
									offset: 1,
									color: '#09bcb7',
								},
							]),
							barBorderRadius: 11,
						},
					},
					data: values1,
				},
				{
					name: '正确数',
					type: 'bar',
					barWidth: '18%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#248ff7',
								},
								{
									offset: 1,
									color: '#6851f1',
								},
							]),
							barBorderRadius: 11,
						},
					},
					data: values2,
				},
			],
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}


	getListeningList()
</script>


<style scoped lang="scss">
	.div-flex-center {
		width: 1300px;
		min-width: 1057px;
		display: flex;
		min-height: 600px;
		margin: auto;
		padding-top: 30px;

		.study-center-title {
			margin-top: 20px;
		}

		.study-center-ul {
			margin-top: 10px;
			list-style-type: none;

			li {
				font-family: SourceHanSansCN-Regular;
				font-size: 14px;
				color: #666666;
				letter-spacing: 0;
				font-weight: 400;
				padding: 7px 28px;
				cursor: pointer;
				list-style: none;
			}

			.study-li-active {
				background-image: linear-gradient(90deg, #ff7465 1%, #ff4b40 100%);
				box-shadow: 0px 4px 10px 0px rgba(255, 75, 64, 0.2);
				border-radius: 8px;
				color: #ffffff !important;
			}
		}

		.left-flex {
			min-width: 185px;
			background: #ffffff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
			border-radius: 10px;
			padding: 10px;
			height: max-content;

			.study-center-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				div {
					display: flex;
					align-items: center;

					span {
						margin-left: 5px;
						font-family: SourceHanSansCN-Regular;
						font-size: 14px;
						color: #666666;
						letter-spacing: 0;
						font-weight: 400;
					}
				}

				.qt_img {
					width: 12px;
					height: 7px;
				}
			}

			hr {
				margin-top: 20px;
				margin-bottom: 20px;
				border: 0;
				border-top: 1px solid #eee;
			}

			.bubble {
				position: relative;
				padding: 2px 12px;
				font-size: 14px;
				color: #333333;
				line-height: 26px;
				background: #f5f7fa;
				border: 1px solid #f5f7fa;
				border-radius: 4px;
				display: flex;
				justify-content: space-between;
				margin-top: 15px;
				align-items: center;
			}

			.bubble::before,
			.bubble::after {
				position: absolute;
				bottom: 28px;
				left: calc(21% - 10px);
				display: block;
				font-size: 0;
				line-height: 0;
				border-color: #f5f7fa transparent transparent;
				border-style: solid;
				border-width: 10px;
				content: "";
				transform: rotate(180deg);
			}

			.left-stu-info {
				display: flex;

				img {
					width: 80px;
					min-width: 80px;
					height: 80px;
					cursor: pointer;
					border-radius: 50%;
				}

				p {
					margin-left: 10px;
					align-self: center;
					word-break: break-word;
					font-family: PingFangSC-Regular;
					font-size: 14px;
					color: #999999;
					line-height: 24px;
					cursor: pointer;

					span {
						font-size: 16px;
						color: #333333;
						font-weight: bold;
						display: block;
						cursor: pointer;
					}
				}
			}
		}

		.right-flex {
			margin-left: 20px;
			padding-top: 8px;
			width: 100%;

			.title-label {
				font-family: SourceHanSansCN-Medium;
				font-size: 16px;
				color: #333333;
			}

			.right-flex-content {
				background: #ffffff;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
				border-radius: 10px;
				/* height: 100%; */
				margin-top: 10px;
				padding-bottom: 34px;

				.tips-div {
					margin: 21px auto 0px;
					background: #f5f7fa;
					border-radius: 8px;
					width: 97.5%;
					padding-top: 9px;

					>div {
						font-family: SourceHanSansCN-Regular;
						font-size: 13px;
						color: #999999;
						text-align: justify;
						line-height: 20px;
						font-weight: 400;
						padding: 14px;
					}
				}

				.flex-label {
					display: flex;
					margin: 9px 14px;
					font-size: 14px;

					.lable {
						font-family: SourceHanSansCN-Medium;
						font-weight: 500;
						margin-right: 50px;
						display: inline-block;
						max-width: 100%;
						margin-bottom: 5px;

						span {
							font-family: SourceHanSansCN-Regular;
							color: #ff4b40;
							font-weight: 400;
						}
					}
				}

				.fxnavIndex_one_block {
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					align-items: end;

					>div {
						width: 55%;

						.statistical-score-div {
							padding: 10px 14px;
							font-family: SourceHanSansCN-Regular;
							font-size: 14px;
							color: #333333;
							line-height: 21px;
							font-weight: 400;

							.score {
								margin-left: 25px;
							}

							.score_mb {
								float: right;
								margin-right: 19px;
							}

							.target_input_color {
								outline: none;
								border: 0px;
								font-weight: bold;
								cursor: pointer;
								width: 135px;
								color: #2cef2c;
							}

							.target_input_color::placeholder {
								color: rgb(190, 190, 190);
							}
						}

						.statistical-table {
							width: 92%;
							margin: 9px 12px;
							border: 1px solid rgba(245, 247, 250, 1);
							border-spacing: 0;
							border-collapse: collapse;

							thead {
								background: #f5f7fa;
								border-radius: 8px 8px 0px 0px;
							}

							tr {
								border: 1px solid rgba(245, 247, 250, 1);
								line-height: 50px;
							}

							th {
								padding: 5px 0px;
								font-family: SourceHanSansCN-Medium;
								font-size: 14px;
								color: #333333;
								text-align: center;
								width: 100px;
								white-space: nowrap;
							}

							td {
								font-family: SourceHanSansCN-Regular;
								font-size: 14px;
								color: #333333;
								text-align: center;
								font-weight: 400;
							}
						}
					}
				}

				.title-p {
					margin-top: 20px;
					display: flex;
					align-items: center;

					.title-p-one {
						height: 20px;
					}

					span {
						vertical-align: middle;
						font-family: SourceHanSansCN-Medium;
						font-size: 14px;
						font-weight: 500;
						margin-left: 4px;
					}

					.title-p-two {
						margin-left: 10px;
						cursor: pointer;
					}

					.form-control {
						height: 34px;
						padding: 6px 12px;
						font-size: 14px;
						line-height: 1.42857143;
						color: #555;
						border-radius: 4px;
						transition: border-color ease-in-out 0.15s,
							box-shadow ease-in-out 0.15s;
					}

					.stu-info-select2 {
						width: 130px !important;
						vertical-align: middle;
						margin-left: 10px;
						background-color: white !important;
						display: inline-block !important;
						-webkit-box-shadow: none !important;
						border: 0 !important;
						cursor: pointer;
						outline: none;

						option {
							font-weight: normal;
							display: block;
							white-space-collapse: collapse;
							text-wrap: nowrap;
							min-height: 1.2em;
							padding: 0px 2px 1px;
						}
					}

					select {
						text-transform: none;
					}
				}

				hr {
					border: 0;
					border-top: 1px solid #eee;
				}

				#studentForm {
					.stu-info-tab {
						width: 97.5%;
						margin: 14px auto;


						.input_box {
							border: 1px solid rgba(235, 235, 235, 1);
						}

						th {
							width: 120px;
							height: 50px;
							font-family: SourceHanSansCN-Medium;
							font-size: 14px;
							font-weight: 500;
							text-align: left;
						}

						td {
							max-width: 310px;
							min-width: 200px;

							input {
								height: 35px;
								display: flex;
								align-items: center;
								width: 88%;
								border: 0;
								padding: 10px;
								font-family: SourceHanSansCN-Regular;
								font-size: 14px;
								color: #333333;
								font-weight: 400;
								outline: none;
							}
						}

						.avatar {
							text-align: center;
							width: 170px;

							.avatar-uploader {
								width: 150px;
								height: 150px;

								.avatar {
									width: 150px;
									height: 150px;
									display: block;
								}
							}

							.avatar_block {
								position: absolute;
								padding: 0px;
								margin-top: -80px;
								width: max-content;
								margin-left: 29px;

								.form-group {
									margin-bottom: 15px;
									text-align: center;

									.fileinput {
										display: inline-block;
										margin-bottom: 9px;

										.thumbnail {
											display: inline-block;
											margin-bottom: 5px;
											overflow: hidden;
											text-align: center;
											vertical-align: middle;

											#picImg {
												width: 150px;
												height: 150px;
												cursor: pointer;
												border-radius: 50%;
											}


											>img {
												max-height: 100%;
											}
										}
									}
								}
							}
						}
					}
				}

				.tab-pane {
					border-bottom: 1px solid rgba(245, 247, 250, 1);
					height: auto;
					display: flex;
					flex-wrap: wrap;
					padding: 5px 0px 0px;

					>div {
						font-family: SourceHanSansCN-Regular;
						font-size: 14px;
						font-weight: 400;
						color: #999999;
						height: 40px;
						padding: 10px 15px 0px;
						cursor: pointer;
					}

					.underline-div {
						>div {
							background: #ff4b40;
							border-radius: 2px;
							width: 30px;
							height: 3px;
							margin: 8px auto;
						}
					}
				}
			}
		}
	}
</style>
<style>
	.el-upload {
		width: 150px;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>